<template>
    <div class="volunteer">
        <!-- search -->
        <div class="search">
            <div @click="inputFocus" class="searchInput"></div>
            <i class="search-icon" v-show="searchShow"></i>
            <span class="searchPlaceHolder" v-show="searchShow">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <scroll class="volunteer-container" :data="volunteerList">
            <div>
                <ul class="volunteer-item">
                    <router-link :to="'/volunteerDetail/'+item.id" class="volunteer-list" v-for="(item, index) in volunteerList" :key="index" tag="li">
                        <p class="volunteer-item-time">{{item.time}}</p>
                        <div class="volunteer-item-wrapper">
                            <img class="volunteer-item-img" v-lazy="item.coverimg" alt="" />
                            <span class="volunteer-item-rank">NO.{{index+1}}</span>
                            <div class="volunteer-item-bottom">
                                <span class="text">{{item.title}}</span>
                                <div class="right" @click.stop="handleClickLike(item.id,$event)">
                                    <i class="icon" :class="{active: item.love === 1 ? true : false}"></i>
                                    <span class="right-text">喜欢TA们</span>
                                </div>
                            </div>
                        </div>
                    </router-link>
                </ul>
            </div>
        </scroll>
        <router-view></router-view>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import {hasClass,addClass,removeClass} from 'common/js/common'

    export default {
        data () {
            return {
                searchInput: "",
                searchShow: true,
                title: "公共文化服务志愿者",
                volunteerList: []
            }
        },
        methods: {
            inputFocus () {
                this.$router.push({
                    path: '/volunteerSearch'
                })
            },
            inputBlur () {
                if (this.searchInput === "") {
                    this.searchShow = true
                }
            },
            handleClickLike (id,event) {
                let item
                if (hasClass(event.target,'right-text')) {
                    item = event.target.previousElementSibling
                }
                if (hasClass(event.target,'icon')) {
                    item = event.target
                }
                if (hasClass(event.target,'right')) {
                    item = event.target.childNodes[0]
                }
                if (hasClass(item,'active')) {
                    // 取消点赞
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=qxteamshoucang', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        teamid: id
                    }).then((res) => {
                        if (res.data.rescode=='0000') {
                            removeClass(item,'active')
                        }
                    }).catch(function (error) {

                    })
                } else {
                    // 收藏
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=teamshoucang', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        teamid: id
                    }).then((res) => {
                        if (res.data.rescode=='0000') {
                            addClass(item,'active')
                        }
                    }).catch(function (error) {

                    })
                }
            },
            getArtsInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=teamlist', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    teamtype: 2
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        this.volunteerList = res.data.data
                    }
                }).catch(function (error) {

                })
            }
        },
        components: {mTitle,Scroll,Loading},
        created () {
            this.getArtsInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .volunteer
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .volunteer-container
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            position: absolute
            top: 86px
            bottom: 0
            overflow: hidden
            .volunteer-item
                width: 100%
                .volunteer-list
                    width: 100%
                    height: 256px
                    position: relative
                    padding-top: 10px
                    padding-bottom: 10px
                    box-sizing: border-box
                    .volunteer-item-time
                        font-size: 16px
                        color: #888
                        margin-bottom: 4px
                    .volunteer-item-wrapper
                        .volunteer-item-img
                            width: 100%
                            height: 180px
                            border-top-left-radius: 6px
                            border-top-right-radius: 6px
                        .volunteer-item-rank
                            position: absolute
                            top: 24px
                            left: 10px
                            color: #fff
                            font-weight: 700
                        .volunteer-item-bottom
                            width: 100%
                            height: 37px
                            background: #0094d4
                            color: #fff
                            line-height: 37px
                            font-size: 16px
                            padding: 0 10px
                            box-sizing: border-box
                            margin-top: -6px
                            z-index: 2
                            position: relative
                            border-bottom-left-radius: 6px
                            border-bottom-right-radius: 6px
                            display: flex
                            overflow: hidden
                            align-items: center
                            .text
                                flex: 1
                                ellipsis()
                                margin-right: 10px
                                font-size: 14px
                            .right
                                flex: 0 0 110px
                                width: 110px
                                font-size: 0
                                height: 26px
                                background: #fff
                                border-radius: 20px
                                text-align: center
                                line-height: 26px
                                .icon
                                    background: url('./icon1.png') no-repeat
                                    width: 16px
                                    height: 14px
                                    background-size: 100% 100%
                                    display: inline-block
                                    vertical-align: middle
                                    &.active
                                        background: url('./icon2.png') no-repeat
                                        background-size: 100% 100%
                                .right-text
                                    font-size: 14px
                                    color: #0094d4
                                    display: inline-block
                                    vertical-align: middle
                                    margin-left: 4px
</style>